<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>固定侧边栏</title>
	<link rel="stylesheet" href="./public/font/iconfont.css">

	<style>
		/* 固定侧边栏容器 */
		.fixed-sidebar {
			position: fixed;
			top: 50%;
			right: 9px;
			transform: translateY(-50%);
			z-index: 4;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		/* 侧边栏项目 */
		.sidebar-item {
			width: 53px;
			height: 53px;
			font-size: 30px;
			color: #000;
			background-color: #fff;
			margin-bottom: 8px;
			border: 1px solid #f1f1f1;
			border-radius: 7px;
			cursor: pointer;
			transition: all 0.3s;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		/* 特殊图标大小 */
		.sidebar-item .fi {
			font-size: 30px;
		}

		/* 悬停效果 */
		.sidebar-item:hover {
			background-color: #1b5390;
			color: #fff;
			border: none;
		}

		/* 悬浮内容框 */
		.sidebar-tooltip {
			position: absolute;
			right: 60px;
			top: 50%;
			transform: translateY(-50%);
			background-color: #fff;
			padding: 10px 10px 10px 70px;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			width: 200px;
			display: none;
		}

		/* 悬浮框图片 */
		.tooltip-image {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 10px;
			left: 10px;
		}

		/* 悬浮框标题 */
		.tooltip-title {
			font-size: 14px;
			font-weight: bold;
			color: #383838;
			margin: 0 0 10px 0;
		}

		/* 悬浮框描述 */
		.tooltip-desc {
			font-size: 12px;
			color: #383838;
			margin: 0;
		}

		/* 响应式调整 */
		@media (max-width: 768px) {
			.fixed-sidebar {
				right: 5px;
			}

			.sidebar-item {
				width: 40px;
				height: 40px;
				font-size: 22px;
			}

			.sidebar-item .fi {
				font-size: 26px;
			}

			.sidebar-tooltip {
				width: 180px;
				padding: 8px 8px 8px 60px;
			}

			.tooltip-image {
				width: 40px;
				height: 40px;
			}
		}
	</style>
	<!-- 引入Font Awesome图标库 -->
</head>

<body>
	<!-- 固定侧边栏 -->
	<ul class="fixed-sidebar" id="fixedSidebar">
		<!-- 业务人员微信 -->
		<li class="sidebar-item" data-tooltip="business">
			<i class="fi fi-briefcase"></i>
			<div class="sidebar-tooltip" id="businessTooltip">
				<img src="https://img.tongmen.cdn.dgyunju.cn/销售-1742171935.png" class="tooltip-image" alt="业务人员微信">
				<p class="tooltip-title">业务人员微信</p>
				<p class="tooltip-desc">咨询业务请联系我</p>
			</div>
		</li>

		<!-- 客服人员微信 -->
		<li class="sidebar-item" data-tooltip="service">
			<i class="fi fi-earphone"></i>
			<div class="sidebar-tooltip" id="serviceTooltip">
				<img src="https://img.tongmen.cdn.dgyunju.cn/销售-1742171935.png" class="tooltip-image" alt="客服人员微信">
				<p class="tooltip-title">客服人员微信</p>
				<p class="tooltip-desc">售后服务请联系我</p>
			</div>
		</li>

		<!-- 技术人员微信 -->
		<li class="sidebar-item" data-tooltip="tech">
			<i class="fi fi-detector"></i>
			<div class="sidebar-tooltip" id="techTooltip">
				<img src="https://img.tongmen.cdn.dgyunju.cn/技术-1742171930.png"" class=" tooltip-image" alt="技术人员微信">
				<p class="tooltip-title">技术人员微信</p>
				<p class="tooltip-desc">技术服务请联系我</p>
			</div>
		</li>

		<!-- 企业微信公众号 -->
		<li class="sidebar-item" data-tooltip="official">
			<i class="fi fi-wechat"></i>
			<div class="sidebar-tooltip" id="officialTooltip">
				<img src="http://img.tongmen.cdn.dgyunju.cn/12961679564710_.pic-1679564733.jpg" class="tooltip-image"
					alt="企业微信公众号">
				<p class="tooltip-title">企业微信公众号</p>
				<p class="tooltip-desc">关注了解最新资讯</p>
			</div>
		</li>
	</ul>

	<!-- 引入jQuery -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function () {
			// 侧边栏项目悬停效果
			$('.sidebar-item').hover(
				function () {
					// 鼠标进入
					const tooltipId = $(this).data('tooltip') + 'Tooltip';
					$('#' + tooltipId).show();
				},
				function () {
					// 鼠标离开
					const tooltipId = $(this).data('tooltip') + 'Tooltip';
					$('#' + tooltipId).hide();
				}
			);
		});
	</script>
</body>

</html>